<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import axios, { getServerUrl } from "@/util/axios";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const tableData = ref([]);

// 定义组件接收的属性
const props = defineProps({
  imageDetailsValue: {
    type: Object,
    default: () => {},
    Required: true,
  },
});

const headers = ref({
  token: window.sessionStorage.getItem("token"),
});

// proPic是后端实体类图片的名称
const ruleForm = ref({
  id: -1,
  swiperPic: "",
  swiperSort: 0,
});

 // 定义表单验证规则，是一个响应式对象，用于验证表单中特定字段输入的数据是否符合要求。
const rules = ref({
  swiperSort: [
    // {
    //   Required: true,
    //   message: "请输入排列号",
    // },
    {
      type: "number",
      message: "排列号必须为整数",
      transform: (value) => Number(value),
    },
  ],
});

const ruleFormRef = ref(null);

// 创建一个响应式数据imageUrl，用于存储幻灯图片的完整URL地址，初始值为空字符串
const imageUrl = ref("");

 // 使用watch函数来监听props中的imageDetailsValue属性的变化情况
watch(
  //第一个参数是要监听的数据源，即props中的imageDetailsValue属性，只要它的值发生改变，就会触发后面的回调函数执行相应操作
  () => props.imageDetailsValue,
   // 第二个参数是一个回调函数，当imageDetailsValue属性变化时执行的操作。在这里，会将传入的imageDetailsValue对象的值赋给ruleForm，
   // 并且根据服务器地址和ruleForm中swiperPic字段的值拼接出幻灯图片的完整URL地址，赋值给imageUrl
  () => {
    ruleForm.value = props.imageDetailsValue;
    imageUrl.value =
      getServerUrl() + "/image/swiper/" + ruleForm.value.swiperPic;
  },
  { deep: true, immediate: true }
);

// 定义父组件事件
const emits = defineEmits([
  "update:modelValue",
  "initBigTypeList",
  "initProductList",
]);
const handleClose = () => {
  console.log("xxx");
  // 调用执行
  emits("update:modelValue", false);
};

//回显修改后的图片，处理图片上传成功后的回调函数，用于更新图片的URL地址以及对应的图片相关字段（存储在ruleForm中）。
const handleAvatarSuccess = (res) => {
  imageUrl.value = getServerUrl() + res.data.src;
  ruleForm.value.swiperPic = res.data.title;
};

// 确认按钮点击时执行的异步函数，用于提交保存幻灯设置相关信息到后端服务器
const handleConfirm = async () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      delete ruleForm.value.type;
      delete ruleForm.value.hotDateTime;
      delete ruleForm.value.hot;
      // 使用axios发起POST请求，将处理后的ruleForm中的数据发送到 "/admin/product/save" 接口进行保存
      let result = await axios.post("/admin/product/save", ruleForm.value);
      let data = result.data;
      if (data.code == 0) {
        ElMessage.success("执行成功");
        ruleFormRef.value.resetFields();
        emits("initProductList");
        handleClose();
      } else {
        ElMessage.error(data.msg);
      }
    }
  });
};
</script>

<template>
  <!-- Dialog 对话框实现详情按钮弹窗显示， 饿了么ui组件 -->
  <!-- model-value是否显示 Dialog -->
  <!-- title说明：Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
  <!-- detailsVisible是从父组件order下index传过来 -->
  <el-dialog
    model-value="swiperImageDetailsVisible"
    title="幻灯设置"
    width="30%"
    @close="handleClose"
    center
  >
    <el-form
      ref="ruleFormRef"
      style="text-align: center"
      :model="ruleForm"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="排列序号" prop="swiperSort">
        <el-input v-model="ruleForm.swiperSort" style="width: 100px"></el-input>
      </el-form-item>

      <el-upload
        :headers="headers"
        class="avatar-uploader"
        :action="getServerUrl() + '/admin/product/uploadSwiperImage'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认更换</el-button>
        <!-- <el-button type="primary" @click="handleClose">取消</el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

